<template>
  <div class="tabbar_content">
    <div class="tabbar_title">
      <span>客服信息</span>
      <el-button size="mini" class="reload_btn" @click="reload">刷新</el-button>
    </div>
    <div class="table_box">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        height="650"
        border
      >
        <el-table-column fixed type="expand">
          <template v-if="props.row.bindSup.length>0" slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-form-item :label="'分配供应商'+props.row.bindSup.length+':'">
                <el-tag v-for="(item,index) in props.row.bindSup" :key="index" class="tag_padding">{{ item.name }}</el-tag>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <!-- <el-table-column
          fixed
          prop="shiroUser.id"
          label="序号"
          width="150"
        /> -->
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        />
        <!-- <el-table-column fixed label="状态" width="150" >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column> -->

        <el-table-column label="分配数量" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.bindSup.length }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="shiroUser.loginNo"
          label="客服号"
          width="200"
        />
        <el-table-column
          prop="shiroUser.realName"
          label="姓名"
          width="150"
        />
        <el-table-column
          prop="shiroUser.sex"
          label="性别"
          width="100"
        />
        <el-table-column
          prop="shiroUser.phone"
          label="联系方式"
          width="120"
        />
        <!-- <el-table-column
          prop="tmp.test"
          label="创建人"
          width="120"
        /> -->
      </el-table>
    </div>
  </div>
</template>
<script>
// import adminSupport from 'lola-admin-support-el'
export default {
  name: 'CustomerServiceManage',
  components: { },
  // mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'CustomerServiceManage',
      tableData: [],
      loading: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      var that = this
      const url = that.$http.conf.api.get('wms').url + '/api/service/index/findInfoList'
      that.$http.post(url, {}).then(function(rsp) {
        if (rsp.code !== 200) {
          that.$message.error(rsp.message)
          return
        }
        that.tableData = rsp.data
        that.loading = false
      }).catch(function(err) {
        console.log(err)
      })
    },
    reload() {
      this.loading = true
      this.init()
    }
    // search() {
    //   console.log(this.formSearch.subscribeTime)
    //   const queryList = []
    //   if (!String.isNullOrEmpty(this.formSearch.keyword)) queryList.push({ 'key': 'o.carNo', 'value': this.formSearch.keyword, 'oper': ':', 'join': 'and' })
    //   if (!String.isNullOrEmpty(this.formSearch.drivingName)) queryList.push({ 'key': 'o.drivingName', 'value': this.formSearch.drivingName, 'oper': ':', 'join': 'and' })
    //   if (!String.isNullOrEmpty(this.formSearch.subscribeName)) queryList.push({ 'key': 'o.subscribeName', 'value': this.formSearch.subscribeName, 'oper': ':', 'join': 'and' })
    //   if (!String.isNullOrEmpty(this.formSearch.subscribePhone)) queryList.push({ 'key': 'subscribePhone', 'value': this.formSearch.subscribePhone, 'oper': ':', 'join': 'or' })
    //   if (!String.isNullOrEmpty(this.formSearch.used) && this.formSearch.used !== 'All') queryList.push({ 'key': 'used', 'value': this.formSearch.used, 'oper': '=', 'join': 'and' })
    //   if (!String.isNullOrEmpty(this.formSearch.endArea)) queryList.push({ 'key': 'o.endArea', 'value': this.formSearch.endArea, 'oper': '=', 'join': 'and' })
    //   if (this.formSearch.subscribeTime !== null && this.formSearch.subscribeTime !== undefined && this.formSearch.subscribeTime.length > 0) {
    //     queryList.push({ 'key': 'o.subscribeTime', 'value': this.formSearch.subscribeTime[0], 'oper': '>=', 'join': 'and' })
    //     queryList.push({ 'key': 'o.subscribeTime', 'value': this.formSearch.subscribeTime[1], 'oper': '<=', 'join': 'and' })
    //   }
    //   this.dataGrid.params.queryList = queryList
    //   this.refresh()
    // },
    // bindSearch() {
    //   this.formSearch = { keyword: '', used: '', createTime: [], endArea: '' }
    // },
    // setArea(val) {
    //   console.log(val)
    //   this.formSearch.endArea = val
    // }
  }
}
</script>
<style lang="scss" scoped>
 .tabbar_content{
   width: 100%;
   height: 100%;
   background: white;
 }
 .table_box{
   border: 1px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
   padding: 20px;
 }
 .tabbar_title{
    border-bottom: solid 1px #dddee1;
    padding: 10px 10px;
    height: 50px;
    // line-height: 50px;
    line-height: 30px;
    font-size: 14px;
    color: #17233d;
    font-weight: 700;
    white-space: nowrap;
 }
 .tag_padding{
   margin-right:10px;
 }
 .reload_btn{
   float:right;
 }
</style>
